<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="900"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-descriptions v-loading="loading" :column="2">
      <el-descriptions-item label="项目名称">{{ detailInfo.projectName }}</el-descriptions-item>
      <el-descriptions-item label="动用通知书文号">{{ detailInfo.notificationLetter }}</el-descriptions-item>
      <el-descriptions-item label="支付编号">{{ detailInfo.code }}</el-descriptions-item>
      <el-descriptions-item label="保函（险）单号">{{ detailInfo.guaranteeLetterNo }}</el-descriptions-item>
      <el-descriptions-item label="账户方式">{{ detailInfo.guaranteeAccountTypeName }}</el-descriptions-item>
      <el-descriptions-item label="支付金额">{{ detailInfo.amount }}</el-descriptions-item>
      <el-descriptions-item label="支付日期">{{ detailInfo.payDate }}</el-descriptions-item>
    </el-descriptions>
    <el-table v-loading="loadTableing" :data="tableList" highlight-current-row border style="margin-top: 15px">
      <el-table-column label="序号" type="index" :index="(index: number) => index + 1" align="center" width="60" />
      <el-table-column label="务工人员公民身份号码" prop="cardNo" align="center" min-width="110" />
      <el-table-column label="务工人员姓名" prop="userName" align="center" min-width="110" />
      <el-table-column label="工资支付金额" prop="amount" align="center" min-width="110" />
      <el-table-column label="工资支付方式" prop="payType" align="center" min-width="110" />
    </el-table>
  </el-dialog>
</template>

<script lang="ts" setup>
import { GetProjectGuaranteeExpenditure, GetProjectGuaranteeExpenditureDetail } from "@/api/guarantee/index";

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "查看支出明细表",
      footBtn: "提交",
      id: 0,
    }),
  },
});

const { dialogDetail } = toRefs(props);

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
const detailInfo = ref<any>({});
const tableList = ref<any[]>([]);
const loadTableing = ref(false);

watch(
  () => dialogDetail.value.visible,
  () => {
    if (dialogDetail.value.visible) {
      loading.value = true;
      loadTableing.value = true;
      GetProjectGuaranteeExpenditure(dialogDetail.value.id)
        .then((res) => {
          if (res.success) {
            Object.assign(detailInfo.value, res.data);
          } else {
          }
        })
        .finally(() => {
          loading.value = false;
        });
      GetProjectGuaranteeExpenditureDetail(dialogDetail.value.id)
        .then((res) => {
          if (res.success) {
            tableList.value = res.data;
          } else {
          }
        })
        .finally(() => {
          loadTableing.value = false;
        });
    }
  }
);

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  emit("sendClose", query);
  detailInfo.value = {};
  tableList.value = [];
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}
.dialog_footer {
  // display: flex;
  // justify-content: center;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
